<h2>Form</h2>

<div class="uk-margin">
    <app-button text="Select" (click)="select()"></app-button>
    <app-button class="uk-margin-left" text="{{ disabled ? 'Enable' : 'Disable' }}" (click)="disabled = !disabled"></app-button>
</div>

<form [formGroup]="form">
    <fieldset class="uk-fieldset" [disabled]="disabled">
        <div class="uk-margin">
            <app-label for="country" text="Country"></app-label>
            <app-select-country formControlName="country" text="Country" [child]="state"></app-select-country>
        </div>
        <div class="uk-margin">
            <app-label for="state" text="State"></app-label>
            <app-select-state formControlName="state" text="State" [child]="city" #state></app-select-state>
        </div>
        <div class="uk-margin">
            <app-label for="city" text="City"></app-label>
            <app-select-city formControlName="city" text="City" #city></app-select-city>
        </div>
        <div class="uk-margin">
            <pre>{{ this.form.value | json }}</pre>
        </div>
    </fieldset>
</form>
